<template>
  <div o-Container>
    <div class="top_box">
      <div class="search_box">
        <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="" />
        <input :value="searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
          @blur="searchEnterKeyPress" />
      </div>
      <div class="button_box">
        <button @click="addNew">创建打卡点</button>
      </div>
    </div>
    <o-list v-bind:source="list.contract">
      <template slot="config" slot-scope="scope">
        <div class="img_box">

          <el-tooltip class="item" effect="dark" content="查看" placement="bottom">
            <img @click="look(scope, 'look')" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png" alt="" />
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <img @click="edit(scope, 'UPDATE')" src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png"
              alt="" />
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <img @click="del(scope)" src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt="" />
          </el-tooltip>
        </div>
      </template>
    </o-list>
    <CreateClock ref="createClock" @reload="reload"></CreateClock>
    <LookClock ref="LookClock"></LookClock>
  </div>
</template>

<script>
import CreateClock from "./Components/CreateClock.vue";
import LookClock from "./Components/LookClock.vue";
export default {
  components: {
    CreateClock,
    LookClock
  },
  name:
    "mms_platform_company_list" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        contract: {
          data: {
            id: 1292, // 菜单表的八爪鱼ID
            cellData: [
              { name: "Name" }, // 打卡点位名称
              { name: "Address" }, // 打卡点地址
              { name: "UpdateUserIDName" }, // 操作人
              { name: "UpdateTime", width: 150 }, // 操作时间
              { name: "TypeIDName", show: false },	// TypeIDName
              { name: "Description", show: false }, // 点位详情
              { name: "ID", show: false }, // ID
              { name: "Scope", show: false }, // 打卡直径
              { name: "UpdateUserID", show: false }, // 操作人
              { name: "XAxis", show: false }, // x坐标
              { name: "YAxis", show: false }, // y坐标
              { name: "ImageUrl", show: false },//
              { name: "TypeID", show: false },	// TypeID
            ],
            paramData: {
              CompanyID: ""
            }
          },
          configWidth: 100,
          showNumber: true
        }
      }
    };
  },
  created() {
    this.list.contract.data.paramData.CompanyID =
      this.octopus.passport.authorization.company == 1
        ? "NULL"
        : this.octopus.passport.id;
  },
  methods: {
    searchEnterKeyPress() { },
    reload() {
      this.list.contract.control.load();
    },
    addNew() {
      this.$refs.createClock.drawerOpen(null, "CREATE");
    },
    look(row) {
      this.$refs.LookClock.drawerOpen(row.data.row, "look");
    },
    edit(row) {
      this.$refs.createClock.drawerOpen(row.data.row, "UPDATE");
    },
    del(row) {
      this.$confirm(`确定删除这个打卡点吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
        center: true
      })
        .then(res => {
          this.api_1290(row.data.row.ID);
        })
        .catch(() => {
          console.log("取消了");
        });
    },
    api_1290(ID) {
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1290, // 菜单表的八爪鱼ID
          type: "DELETE",
          value: ID,
          cellData: []
        },
        // 处理回调事件，通过分析data.status.code的状态来实现。
        data => {
          if (data.status.code === 200) {
            this.list.contract.control.load();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    }
  },
  props: ["oData"]
};
</script>
<style scoped>
.top_box {
  width: 100%;
  height: 5.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-bottom: 1.2rem;
  box-sizing: border-box;
}

.top_box .search_box {
  width: 32rem;
  height: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 4rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.8rem;
  box-sizing: border-box;
}

.top_box .search_box input {
  border: none;
  outline: none;
  width: 70%;
}

.top_box .search_box img {
  cursor: pointer;
}

.top_box .button_box button {
  width: 15rem;
  height: 100%;
  border-radius: 4rem;
  border: none;
  color: #fff;
  background-color: #f78c52;
  box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
  font-size: 1.7rem;
  cursor: pointer;
}

.top_box .button_box button {
  margin-right: 1.3rem;
}

.el-message-box {
  background-color: #fff !important;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

>>>.Content {
  height: 84vh !important;
}
</style>
